<template>
  <!-- 心理数据统计页面 -->
  <div class="app-container">
    <searchForm :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset" :formLabelWidth="formLabelWidth"
      v-show="showSearch" />
    <div class="text-title">
      <div class="text-info">
        <p>{{ statsObjcek.consQuantity.info }}</p>
        <p>预约人数：{{ statsObjcek.consQuantity.consQuantityData.APT_PPL_COUNT }}人</p>
        <p>心理咨询人数：{{ statsObjcek.consQuantity.consQuantityData.APT_PLL_Y_COUNT }}人</p>
        <p>预约爽约人数：{{ statsObjcek.consQuantity.consQuantityData.APT_PPL_S_COUNT }}人</p>
      </div>
      <div class="text-info">
        <p>{{ statsObjcek.msgVol.info }}</p>
        <p>留言条数：{{ statsObjcek.msgVol.msgVolData.BL_COUNT }}条</p>
        <p>留言人数：{{ statsObjcek.msgVol.msgVolData.BL_PPL_COUNT }}人</p>
        <p>敏感留言：{{ statsObjcek.msgVol.msgVolData.BL_G_COUNT }}条</p>
      </div>
      <div class="text-info">
        <p>{{ statsObjcek.consRanking.info }}</p>
        <p v-for="(item, index) in statsObjcek.consRanking.consRankingData" :key="index">
          {{ item.CONSNAME }}
          <span>咨询量：</span> {{ item.APT_PPL_COUNT }}人
        </p>
      </div>
      <div class="text-info">
        <p>{{ statsObjcek.adCons.info }}</p>
        <p v-for="(item, index) in statsObjcek.adCons.adConsData" :key="index">
          {{ item.XL }} ：
          <span>预约</span> {{ item.APT_PPL_COUNT }}人
          <span>咨询</span> {{ item.APT_PPL_Y_COUNT }}人
          <span>爽约</span> {{ item.APT_PPL_S_COUNT }}人
        </p>
      </div>
    </div>
    <div class="chartBox">
      <div class="chartBox-title">
        {{ chartTitle }}
      </div>
      <div class="chartBox-content" id="mychart"></div>
      <div>
        <el-row>
          <el-col :span="8">
            咨询内容统计
            <div class="echart" id="mychartPie" :style="myChartStyle"></div>
          </el-col>
          <el-col :span="16">
            <el-table :data="pieData" border>

              <el-table-column label="咨询关键词" align="center" prop="name">
              </el-table-column>
              <el-table-column label="咨询人数" align="center" prop="value">
              </el-table-column>

            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
import searchForm from "@/components/Search/searchForm.vue";
import { statsInfo, statsConsVolNofP, statsConsCentVol } from '@/api/psychological/statisticalData'
import { getDicts } from "@/api/system/dict/type";

export default {
  components: { searchForm, },

  data() {
    return {
      showSearch: true,
      formLabelWidth: "75px",
      myChartStyle: { width: "100%", height: "400px" }, //图表样式

      formOptions: [
        {
          label: "年份",
          prop: "years",
          type: "year",
          element: "el-date-picker",
          placeholder: "请选择年份",
          initValue: new Date().getFullYear() + '',
          valueFormat: "yyyy"
        },
      ],
      statsObjcek: {},
      chartTitle: '',

      queryParams: {
        years: new Date().getFullYear() + ''
      },
      pieName: [],
      pieData: []
    };
  },
  created() {


  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取搜索表单提交的数据
    onSearch(val) {
      // 查询条件和分页数据合并
      this.queryParams = Object.assign(this.queryParams, val);

      this.getList();
    },
    // 重置
    onReset(data) {

      this.queryParams = Object.assign(this.queryParams, data);
      this.getList();
    },
    /** 查询角色列表 */
    async getList() {
      await statsInfo(this.queryParams.years).then(res => {
        this.statsObjcek = res
        console.log(res, '统计咨询量、留言量、咨询师排名、本专科咨询情况')
      })
      statsConsCentVol(this.queryParams.years).then(res => {
        console.log(res, '获取各个院系咨询量人数')

        this.pieData = res.data.map(item => {
          return {
            value: item['APT_PPL_COUNT'],
            name: item['CONS_REQ_NAME'],
          }

        })
        getDicts("psy_cons_req_type").then(res => {

          res.data.forEach(e => {
            this.pieData.forEach(item => {
              if (item.name == e.dictValue) {
                item.name = e.dictLabel
              }
            })
          })
          this.initDate()
          this.peiEcharts()
          console.log(res, this.pieData, '自选')
        });


      })
      statsConsVolNofP(this.queryParams.years).then((res) => {

        const { data, code } = res
        console.log(data, 'zoi')
        this.chartTitle = data.title

        if (code == 200) {
          this.initEcharts(data)
        }
      })
    },
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        // this.xData[i] = i;
        // this.yData =this.xData[i]*this.xData[i];
        this.pieName[i] = this.pieData[i].name;
      }
    },
    peiEcharts() {
      console.log(this.pieName, 'ddd')
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          top: '5%',
          left: 'center'
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          top: "0%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: function (params) {
                console.log(params,'paramsparamsparams')
                if (params.percent === undefined) {
                  return params.name + params.data.value + '%'
                } else if (params.percent === 0) {
                  return params.name + params.percent + '%'
                } else {
                  return params.name + params.percent + '%'
                }
              },
            },
            radius: "30%", //饼图半径
            data: this.pieData
          }
        ]
      };
      console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychartPie"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    initEcharts(props) {
      // 基本柱状图
      const option = {

        // 显示图例
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },

        },
        legend: {
          show: true,
          data: ['心理咨询'],
          // top: "0%",
          // zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
          // z:2,

        },
        xAxis: {
          data: props.xLabels,
          axisLabel: {
            interval: 0,
            rotate: 10
          },
        },
        yAxis: {},
        series: [
          {
            name: '心理咨询',
            type: "bar", //形状为柱状图
            barWidth: '60%',
            data: props.data
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      // window.addEventListener("resize", () => {
      //   this.myChart.resize();
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.initEcharts {
  height: 500px;
  width: 300px;
}

#barChart {
  width: 100%;
  height: 300px;
}

.chartBox {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

  &+.chartBox {
    margin-top: 15px;
  }

  &-title {
    height: 25px;
    line-height: 25px;
    padding: 0 20px;
    border-bottom: 1px solid #EBEEF5;
  }

  &-content {
    height: 300px;
  }
}

.text-title {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;

}

.text-info {
  max-height: 130px;
  overflow-y: auto;
  color: #000;
}

.text-title div {
  width: 24%;

  background-color: #EBEEF5;
  text-align: center;
}
</style>